<template>
  <div
    class="banner component-container"
    style="width: 100%"
    data-v-a0503cc8=""
    data-v-0f9d3237=""
  >
    <div
      class="components-container"
      style="background: transparent; --vertical_margin: 0px; --transverse_margin: 0px;"
      data-v-73be6a2a=""
      data-v-a0503cc8=""
    >
      <div class="container-body" data-v-73be6a2a="">
        <div
          class="image-ad-content"
          style="height: 448px; border-radius: 0"
          data-v-73be6a2a=""
          data-v-a0503cc8=""
        >
          <!---->
          <div
            id="swiperCarousel"
            data-v-a0503cc8=""
            data-v-73be6a2a=""
            class="swiperBox swiper-container"
            style="border-radius: 0;"
          >
            <div
              data-v-a0503cc8=""
              data-v-73be6a2a=""
              class="swiper-wrapper"
              style="transition-duration: 0ms; transform: translate3d(-1230px, 0px, 0px);"
            >
              <div
                data-v-a0503cc8=""
                data-v-73be6a2a=""
                class="swiper-slide"
                style="border-radius: 0px; width: 1200px; margin-right: 30px;"
              >
                <img
                  data-v-a0503cc8=""
                  data-v-73be6a2a=""
                  src="/components/carousel/a.jpg"
                  class="swiper-slide-img"
                >
              </div>
              <div
                data-v-a0503cc8=""
                data-v-73be6a2a=""
                class="swiper-slide"
                style="border-radius: 0px; width: 1200px; margin-right: 30px;"
              >
                <img
                  data-v-a0503cc8=""
                  data-v-73be6a2a=""
                  src="/components/carousel/b.jpg"
                  class="swiper-slide-img"
                >
              </div>
              <div
                data-v-a0503cc8=""
                data-v-73be6a2a=""
                class="swiper-slide"
                style="border-radius: 0px; width: 1200px; margin-right: 30px;"
              >
                <img
                  data-v-a0503cc8=""
                  data-v-73be6a2a=""
                  src="/components/carousel/c.jpg"
                  class="swiper-slide-img"
                >
              </div>
              <div
                data-v-a0503cc8=""
                data-v-73be6a2a=""
                class="swiper-slide"
                style="border-radius: 0px; width: 1200px; margin-right: 30px;"
              >
                <img
                  data-v-a0503cc8=""
                  data-v-73be6a2a=""
                  src="/components/carousel/d.jpg"
                  class="swiper-slide-img"
                >
              </div>
              <!---->
            </div>
            <div
              class="swiper-button-prev swiper-prev iconfont icon-hd_arrow-right-bold"
            />
            <div
              class="swiper-button-next swiper-next iconfont icon-hd_arrow-right-bold"
            />
            <div
              class="swiper-pagination"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 Swiper
import Swiper from 'swiper/swiper-bundle.min.js'

export default {
  mounted () {
    // 在组件挂载后初始化 Swiper
    var mySwiper = new Swiper('#swiperCarousel', { // eslint-disable-line no-unused-vars
      // Swiper 配置项
      // direction: 'horizontal',
      loop: true, // 无限循环
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      pagination: {
        el: '.swiper-pagination',
        bulletElement: 'span',
        // bulletClass : 'my-bullet', // 需设置.my-bullet 样式
        // bulletActiveClass: 'my-bullet-active',
        clickable: true
      },
      autoplay: {
        delay: 4500,
        stopOnLastSlide: false,
        disableOnInteraction: true // 是否在用户交互后禁用自动播放
      }
    })
    this.dynamicImportCss()
  },
  beforeDestroy () {
    this.removeDynamicCss()
  },
  methods: {
    dynamicImportCss () {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.type = 'text/css'
      link.href = '/sass-Style/carouselSwiper/style.css' // 替换为你的 CSS 文件路径

      // 将 link 元素添加到 head 中
      document.head.appendChild(link)
    },
    removeDynamicCss () {
      // 移除动态添加的 link 元素
      const link = document.querySelector('link[href="/sass-Style/carouselSwiper/style.css"]')
      if (link) {
        document.head.removeChild(link)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.banner[data-v-a0503cc8] {
  margin: 0 auto 22px;
  position: relative;
}

@import '~/static/sass/carouselAbc_sass/variables';
@import "~/static/sass/carouselAbc_sass/components-container";
</style>
